<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>jQuery拖动重新排序</title>
	<script src="jq.js"></script>
	<script>
		$(function () {
			function Pointer(x, y) {
				this.x = x;
				this.y = y;
			}

			function Position(left, top) {
				this.left = left;
				this.top = top;
			}
			$(".item_content .item").each(function (i) {
				this.init = function () {
						this.box = $(this).parent();
						$(this).attr("index", i).css({
							position: "absolute",
							left: this.box.offset().left,
							top: this.box.offset().top
						}).appendTo(".item_content");
						this.drag();
					},
					this.move = function (callback) {
						$(this).stop(true).animate({
							left: this.box.offset().left,
							top: this.box.offset().top
						}, 500, function () {
							if (callback) {
								callback.call(this);
							}
						});
					},
					this.collisionCheck = function () {
						var currentItem = this;
						var direction = null;
						$(this).siblings(".item").each(function () {
							if (
								currentItem.pointer.x > this.box.offset().left &&
								currentItem.pointer.y > this.box.offset().top &&
								(currentItem.pointer.x < this.box.offset().left + this.box.width()) &&
								(currentItem.pointer.y < this.box.offset().top + this.box.height())
							) {
								if (currentItem.box.offset().top < this.box.offset().top) {
									direction = "down";
								} else if (currentItem.box.offset().top > this.box.offset().top) {
									direction = "up";
								} else {
									direction = "normal";
								}
								this.swap(currentItem, direction);
							}
						});
					},
					this.swap = function (currentItem, direction) {
						if (this.moveing) return false;
						var directions = {
							normal: function () {
								var saveBox = this.box;
								this.box = currentItem.box;
								currentItem.box = saveBox;
								this.move();
								$(this).attr("index", this.box.index());
								$(currentItem).attr("index", currentItem.box.index());
							},
							down: function () {
								var box = this.box;
								var node = this;
								var startIndex = currentItem.box.index();
								var endIndex = node.box.index();;
								for (var i = endIndex; i > startIndex; i--) {
									var prevNode = $(".item_content .item[index=" + (i - 1) + "]")[0];
									node.box = prevNode.box;
									$(node).attr("index", node.box.index());
									node.move();
									node = prevNode;
								}
								currentItem.box = box;
								$(currentItem).attr("index", box.index());
							},
							up: function () {
								var box = this.box;
								var node = this;
								var startIndex = node.box.index();
								var endIndex = currentItem.box.index();;
								for (var i = startIndex; i < endIndex; i++) {
									var nextNode = $(".item_content .item[index=" + (i + 1) + "]")[0];
									node.box = nextNode.box;
									$(node).attr("index", node.box.index());
									node.move();
									node = nextNode;
								}
								currentItem.box = box;
								$(currentItem).attr("index", box.index());
							}
						}
						directions[direction].call(this);
					},
					this.drag = function () {
						var oldPosition = new Position();
						var oldPointer = new Pointer();
						var isDrag = false;
						var currentItem = null;
						$(this).mousedown(function (e) {
							e.preventDefault();
							oldPosition.left = $(this).position().left;
							oldPosition.top = $(this).position().top;
							oldPointer.x = e.clientX;
							oldPointer.y = e.clientY;
							isDrag = true;

							currentItem = this;

						});
						$(document).mousemove(function (e) {
							var currentPointer = new Pointer(e.clientX, e.clientY);
							if (!isDrag) return false;
							$(currentItem).css({
								"opacity": "0.8",
								"z-index": 999
							});
							var left = currentPointer.x - oldPointer.x + oldPosition.left;
							var top = currentPointer.y - oldPointer.y + oldPosition.top;
							$(currentItem).css({
								left: left,
								top: top
							});
							currentItem.pointer = currentPointer;


							currentItem.collisionCheck();


						});
						$(document).mouseup(function () {
							if (!isDrag) return false;
							isDrag = false;
							currentItem.move(function () {
								$(this).css({
									"opacity": "1",
									"z-index": 0
								});
							});
						});
					}
				this.init();
			});
		});
	</script>
	<style>
		h1 {
			text-align: center;
		}

		.item_content ul {
			list-style: none;
		}

		.item_content ul li {
			width: 200px;
			height: 120px;
			float: left;
			margin: 10px
		}

		.item_content {
			width: 740px;
			height: 460px;
			border: 1px solid #ccc;
			margin: 50px auto;
		}

		.item_content .item {
			width: 200px;
			height: 120px;
			line-height: 120px;
			text-align: center;
			cursor: pointer;
			background: #ccc;

		}

		.item_content .item img {
			width: 200px;
			height: 120px;
			border-radius: 6px;

		}
	</style>
</head>

<body>


	<div class="item_container">
		<h1>jQuery拖动重新排序排</h1>
		<div class="item_content">
			<ul>
				<li>
					<div class="item">
						<img src="youku.png" />
					</div>
				</li>

				<li>
					<div class="item">
						<img src="jd.png" />
					</div>
				</li>

				<li>
					<div class="item">
						<img src="taobao.png" />
					</div>
				</li>

				<li>
					<div class="item">
						<img src="fenghuan.png" />
					</div>
				</li>


				<li>
					<div class="item">
						<img src="souhu.png" />
					</div>
				</li>


				<li>
					<div class="item">
						<img src="wangyi.png" />
					</div>
				</li>


				<li>
					<div class="item">
						<img src="renren.png" />
					</div>
				</li>

				<li>
					<div class="item">
						<img src="360.png" />
					</div>
				</li>

				<li>
					<div class="item">
						<img src="360game.png" />
					</div>
				</li>

			</ul>
		</div>
	</div>

</body>

</html>